<template >
<view style="background:#f7f7f7" class="container">
      <div   class="topNav">
      <div @click='toList(index)'  class="list" :class='{Cnav:index==thisclick0}'   v-for='(val,index) in topNav' :key='index'>
        <span>{{val}}</span>
      </div>
      <div class="mobile"  :animation="animation"></div>
  </div>
  <div style="height:60px;"></div>
    <view class="orders">
        <div v-if='nothing'  class="nothing">
            <img src="/static/images/loading.png" alt="">
            <p>暂无数据</p>
            
        </div>
        <ul>
            
            
            <li v-for="(val,index) in orderList" @click='todetails(val)' :key='index'>
           
                <div class="top">
                       <span>{{val.storeName}} <img  style="width:6px;height:11px;margin-right:12px;margin-left:8px;" class="goRight" src="/static/images/go.png"/></span>  
                       <span>{{val.statusName}}</span>
                </div>
                <div v-for="(itemsList,list) in val.itemsList" :key="list" class="content">
          
                        <img class="left" :src="itemsList.productThumb" >
                 
                    <div class="right">
                        <p>{{itemsList.productName}}</p>
                        <p>{{itemsList.cStatus}}</p>
                        <p>
                            <span> {{itemsList.colorName}} </span>
                        </p>
                      
                        
                    </div>
                    <div class="last">
                              <span>￥{{itemsList.price}}</span>
                            <span>￥{{itemsList.delPrice}}</span>
                    </div>
                </div>
                <p class="price">
                    共{{val.totNum}}件货品 &#12288; 总计： <span> ￥{{val.totAmnt}}.00 </span>（含运费￥0）
                </p>
                <div class="bottom">
                    <!-- <span class="span1" :class="{ 'span3': '待付款' ==val.statusName ,'span2': '确认收货' ==val.statusName }">付款</span> -->
                    <span @click.stop='startPay(val,index)' v-if="'待付款'==val.statusName" class="span3">付款</span>
                    <span @click.stop='OrderCancel(val,index)' v-if="'待付款'==val.statusName" class="span1">取消订单</span>
                    <span @click.stop='OrderDel(val,index)' v-if="'订单已取消'==val.statusName" class="span1">删除订单</span>
                    <!-- <span class="span1">查看物流</span> -->
                    <!-- <span class="span1">去评价</span> -->
                    <span @click.stop='OrderReceipt(val,index)' v-if="'已发货'==val.statusName"  class="span1">确认收货</span>
              
                </div>
             
            </li>
            
        </ul>
    </view>
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'

export default {
  data () {
    return {
      orderList: [],
      page:1,
      topNav:['全部','待付款','待发货','待收货','待评价'],
      thisclick0:0,
       animation:'',
       nothing:false,
       loadingBt:false
     
    } 
  },

 
  async mounted () {
    await Promise.all([
      this.getOrderList()
    ])
  },
    onReachBottom(){
    if(this.loadingBt){
       this.getOrderList()
    }
  
  },
  onUnload(){
    this. orderList= [];
     this.page=1; 
      this.thisclick0=0;
  },
  onShow(){
    if(this.$store.state.otherBack){
            this.orderList=[];
            this.getOrderList()
      }
       this.thisclick0 =this.$route.query.order;
  
       let left =0.2*wx.getSystemInfoSync().windowWidth* this.thisclick0 ;
       this.animationEvents(left,0) ;
  },
  methods: {
      todetails(val){
          if('订单已取消'==val.statusName){
             wx.showToast({
              title: '订单已取消',
              icon: 'none'
            })
              return false
          }
            wx.navigateTo({
               url: '/pages/ucenter/orderDetail?orderId='+val.orderId  
              });
            
      },
    // 获取订单数据
    async getOrderList () {
          let data=JSON.stringify({"type":this.thisclick0,"pageIndex":this.page,"pageSize":"10"})
            const res = await api.BuyerOrderList({"data":data});
               this.orderList = this.orderList.concat(res.data);
                   if (res.data.length == 10) {
                        this.page++;
                        this.loadingBt=true;
                    }else{
                        this.loadingBt=false;
                    }
                    if(this.orderList==0){
                        this.nothing=true ;
                    }else{
                        this.nothing=false ;
                    }
   
     
    },
    async startPay(val){ // 支付
       let data=JSON.stringify({"orderId":val.orderId})
  
      const res = await api.BuyerOrderPayInfo({"data":data});
                                     
        this.pay(res.data); //调取支付
    },
     async OrderCancel(val){ // 取消订单
            let that =this;
            wx.showModal({
                title: '',
                content: '您确定取消当前订单吗？',
                success: async function (res) {
                if (res.confirm) {
                    let data=JSON.stringify({"orderId":val.orderId})
                    const Nres = await api.BuyerOrderCancel({"data":data});
                    if(Nres.status==0){
                        that.page=1;
                        that.orderList=[];
        
                        that.getOrderList();
                    }
                }
                }
            })

    },
    
      animationEvents(moveY,v){
      // console.log("moveY:" + moveY + "\nshow:" + show,'开始');
      this.animation = wx.createAnimation({ // 可重复使用
        transformOrigin: "50% 50%",
        duration: v,
        timingFunction: "ease",
        delay: 0
      }
      )
      this.animation.left(moveY + 'px').step()
    },
       toList(index){
           if(this.thisclick0!=index){
                this.orderList=[]
                this.page=1;
                let left =0.2*wx.getSystemInfoSync().windowWidth*index ;
                this.animationEvents(left,350) ;
                console.log(left)
                this.thisclick0=index;
                this.getOrderList()
           }
  
 
    },
  async OrderDel(val){
      let that =this;
    wx.showModal({
        title: '',
        content: '是否删除当前订单吗？',
        success: async function (res) {
        if (res.confirm) {
            let data=JSON.stringify({"orderId":val.orderId})
            const Nres = await api.BuyerOrderDel({"data":data});
            if(Nres.status==0){
                    that.page=1;
                    that.orderList=[];
                    that.getOrderList();
                }
            }
        }
    })
  },  
      async OrderReceipt(val,index){ // 确认收货
         let that =this;
            wx.showModal({
                title: '',
                content: '您是否确认收货？',
                success: async function (res) {
                if (res.confirm) {
                    let data=JSON.stringify({"orderId":val.orderId})
                    const Nres = await api.BuyerOrderReceipt({"data":data});
                    if(Nres.status==0){
                        that.page=1;
                        that.orderList=[];
                        that.getOrderList();
                    }
                }
                }
            })
           
    },
    
      async pay (val) {
         let payInfoReq = {}
          payInfoReq =val;
          payInfoReq.payMode = "weChatPay";
          payInfoReq.payClient = "jsapi_buyer_mini";//h5
           payInfoReq.openId = wx.getStorageSync('openId')
          //  'o4jjr4qU9XryOBXACp5yFv3u_Hlw'

        //  let data=JSON.stringify({"payProductName":"订单费","payAmnt":10,"orderId":"2c0b8bea556041af9e36094ae55f67df","payProductDesc":"购买Ee","payMode":"weChatPay","payId":"T418112617260000003","payName":"orderPay","payClient":"jsapi_buyer_mini",'openId':'o4jjr4qU9XryOBXACp5yFv3u_Hlw'})
            let data=JSON.stringify(payInfoReq)
            const res = await api.BuyerOrderPay({"data":data});
            
            // console.log('pay页直接支付,请求结果', res);
            // if (res.errno === 0) {
                
                let payParam = res.data.payInfo;
        console.log(payParam)
                wx.requestPayment({
                'timeStamp': payParam.timeStamp,
                'nonceStr': payParam.nonceStr,
                'package': payParam.package,
                'signType': payParam.signType,
                'paySign': payParam.paySign,
                'success': function (res) {
                    // wx.navigateTo({
                    // url: '../pay/payResult?status=1'
                    // })
                },
                'fail': function (res) {
                    // wx.navigateTo({
                    // url: '../pay/payResult?status=0'
                    // })
                }
                })
   
    }
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/ucenter/order'
    }
  }
}
</script>

<style lang='scss' scoped>
page{
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}
.Cnav{
  color: #FD6D1F;
}
.nothing{
    p{
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        margin-top: 35px;
    }
    img{
        display: block;
        height:142px;
        width: 142px;
        margin: 0 auto;
        margin-top: 80px;
    }
}
.mobile{
      transition-duration: 0.2s;
      width: 20vw;;
      height: 2px;
      background: #FD6D1F;
      position: absolute;
      bottom:0;
      left: 0;


      
}
.topNav{
    position: fixed;
    width:100vw;
    background:#fff;
    z-index: 999;
    left:0;
    top:0;
  }
 .list{

        width:20%;
        display: inline-block;
        height: 44px;;
        text-align: center;
        font-size: 13px;
        // color: #333333;

        img{

          height: 16px;
          width: 16px;
          display: block;
          margin: 0 auto;
          margin-top: 15px;

        }
        span{
         
          font-size: 13px;
          line-height: 38px;

        }
      }
.orders{
    ul{
       background:rgba(248,248,248,1);
        li{
            background: #fff;
            width: 92vw;;
            padding: 0 4vw;
            margin-bottom: 15px;
            .top{
                height: 43px;
                line-height: 43px;
                font-size: 14px;
                span:nth-child(1){
                    float: left;
                    color: #333333;
                }
                span:nth-child(2){
                    float: right;
                    color:#FD6D1F;
                }
            }
            .content{
                height: 100px;;
                border-top:1px solid rgba(51,51,51,0.1);
                position: relative;
                padding-top: 11px;
                .left{
                    float: left;
                    height: 79px;
                    width: 24vw; 
                }
                .right{
                    float: left;
                    margin-left: 15px;
                    width: 53vw;
                    p:nth-child(1){
                        color: rgba(51,51,51,1);
                        font-size: 14px;
                        line-height: 16px;
                        overflow: hidden;
                        height: 32px;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical; 

                    }
                     p:nth-child(2){
                        font-size: 12px;
                        padding-top:10px;
                        color: #FD6D1F;
                    }
                       p:nth-child(3){
                        font-size: 12px;
                        padding-top:8px;
                        color: rgba(51,51,51,0.6);
                    }
                }
                .last{
                    position: absolute;
                    bottom:18px;
                    right: 10px;
                    text-indent: right;
                    display: block;
                    font-size: 12px;
                    span:nth-child(1){
                        display: block;
                        color: #333333;
                    };
                    span:nth-child(2){
                         display: block;
                         padding-top:5px;
                        text-decoration: line-through;
                        color: rgba(51,51,51,0.5);
                    }
                }
            }
            .price{
                line-height: 35px;
                height: 35px;;
                text-align: right;
                 border-top:1px solid rgba(51,51,51,0.1);
                 border-bottom:1px solid rgba(51,51,51,0.1);
                 font-size: 12px;
                 span{
                     font-size: 13px;
                     color: #FD6D1F;
                 }
            }
            .bottom{
                 height: 49px;
                span{
                   
                    float: right;
                    margin-right: 15px;
                    font-size: 14px;
                    text-align: center;
                    display: inline-block;
                    width: 69px;;
                    margin-top: 10px;
                    border-radius: 2px;
                }
                span:nth-child(1){
                    margin-right: 0;    
                }
            }
          .span1{
               line-height: 29px;
               border:1px solid  rgba(51,51,51,1);
               color: rgba(51,51,51,1);;
          }  
          .span2{
               line-height: 29px;
               border:1px solid  rgba(51,51,51,1);
               color: #FD6D1F;
          }  
         .span3{
              
               color: #fff;
                line-height: 31px;
               background: #FD6D1F;
          }  
        }
    }
}
</style>
